<template>
    <div class="playlist-page">
        <div class="playlist-header">
            <div class="header-cover">
                <img :src="playlistObj.coverImgUrl + '?imageView&thumbnail=100y100&quality=50&tostatic=0'" v-if="playlistObj" />
                
            </div>
            <div class="header-nav">
                <v-icon
                    class="go-back-icon"
                    @click="$router.go(-1)"
                >
                    mdi-chevron-left
                </v-icon>
                <span v-if="caption">{{caption}}</span>

                <v-icon>
                    mdi-search
                </v-icon>


            </div>
            <div class="playlist-info" v-if="playlistObj" >
                <div class="playlist-cover"> 
                    <img :src="playlistObj.coverImgUrl + '?imageView&thumbnail=100y100&quality=50&tostatic=0'" alt="">
                </div>
                <div class="playlist-sub-info">
                    <div class="playlist-creator">{{$route.query.type ? '歌手' : '创建者' }} ： {{playlistObj.creator.nickname}}</div>
                    <div class="playlist-desc">描述： {{playlistObj.description.slice(0,80) + '...'}}</div>
                </div>
            </div>
        </div>
        <div class="playlist-content">
            <div class="playlist-options">
                    <v-icon>
                        mdi-playlist-music
                    </v-icon>

                    <v-icon >

                        mdi-playlist-plus
                    </v-icon>

                    <v-icon >
                        mdi-message-bulleted
                    </v-icon>
                    <v-icon>mdi-playlist-check</v-icon>
            </div>
            <div>
                <play-list
                    :data="playlist"
                    :order="true"
                ></play-list>
            </div>
        </div>

        <Control />
    </div>
</template>

<script>

import api from '@/api/index.js'
import playList from '@/components/playlist/playlist.vue'
import Control from '@/components/control/control'

export default {
    components: {
        playList,
        Control
    },
    data(){
        return {
            caption: '我是一个标题',
            songsId: '',
            playlistObj: null,
            playlist: null
        }
    },

    watch: {
        songsId(n){
            if(n){
                this.getSongsList()
            }
        },
        
        playlistObj(n) {
            this.caption = n.name;
            this.playlist = n.tracks;
        }
    },

    methods: {
        getSongsList() {
            var id = this.songsId;
            var type = this.$route.query.type;
            if(type && type === 'album'){

                api.getAlbumList(id).then(res => {

                    console.log('album res')
                    console.log(res);

                    var album = res.data.album;
                    
                    var obj = {
                        name: album.name,
                        coverImgUrl: album.blurPicUrl,
                        creator: {
                            nickname: album.artists.map(item => item.name).join('/')
                        },
                        description: album.description,
                        id: album.id,
                        tracks: res.data.songs
                    }

                    this.playlistObj = obj;


                })
            }else{
                api.songsDetail(id).then(res =>{
                    console.log(res);
                    
                    this.playlistObj = res.data.playlist;

                    console.log(this.playlistObj);
                    // this.playlistObj = res.data ? res.data.playlist : res.playlist ? res.playlist : {};
                })
            }
        }
    },

    activated(){
        this.songsId = this.$route.query.id ? this.$route.query.id : '';

    }
}
</script>

<style lang="scss" scoped>
 @import '@/assets/styles/global';
    .playlist-page {
        display: flex;
        flex-direction: column;
        height: 100vh; 
        .playlist-header {
            position: relative;
            height: px2rem(210);
            flex-shrink: 0;
            .header-cover {
                position: absolute;
                z-index: -1;
                top: 0;
                left: 0;
                right: 0;
                height: 100%;
                -webkit-filter: blur(2px);
                overflow: hidden;
                img {
                    width: 100%;
                }

                &::after {
                    position: absolute;
                    content: '';
                    width: 100%;
                    height: 100%;
                    background: rgba(0,0,0,.4);
                    // filter: blur(30px);
                    left: 0;
                    top: 0;
                }
            }

            .header-nav {
                height: px2rem(42);
                background: rgba(0,0,0,.4);
                color: #fff;
                display: flex;
                justify-content: space-between;
                padding: 0 px2rem(10);
                align-items: center;
                box-sizing: border-box;
                .go-back-icon {
                    color: #fff;
                }
                span {
                    @include defaultTitle;
                }
            }

            .playlist-info {
                color: #fff;
                text-align: left;
                padding: px2rem(14);
                @include spaceBetween;
                
                .playlist-cover {
                    flex-shrink: 0;
                    width: 30%;
                    height: px2rem(120);
                }

                .playlist-sub-info {
                    align-self: flex-start;
                    width: 70%;
                    .playlist-creator {
                        @include defaultTitle;
                        @include ellipsis;
                    }

                    .playlist-desc {
                        @include defaultFontSize;
                        color: #e4e2e2;
                        line-height: 1.5;
                    }
                }
            }
        }

        .playlist-content {
            width: 100%;
            flex: 1;
            overflow: auto;
            position: relative;

            .playlist-options {
                position: fixed;
                top: px2rem(172);
                left: px2rem(8);
                right: px2rem(8);
                height: px2rem(42);
                z-index: 2;
                border-radius: px2rem(16) px2rem(16) 0 0; 
                background: #fff;
                display: flex;
                justify-content: space-around;
                align-items: center;
                span {
                    font-size: px2rem(18);
                    cursor: pointer;
                }
            }
        }

    }
</style>